<template>
  <div class="login-container">
    <el-form
      ref="ruleFormRef"
      :rules="rules"
      :model="form"
      label-width="80px"
      class="login-form"
    >
      <h2 class="login-title">{{ t("user.UserManagementSystem") }}</h2>
      <h6 style="text-align: center; margin-top: 10px">
        UI:vue3 compositionApi_vuex_internationalization_axios_elementui
      </h6>
      <h6 style="text-align: center; margin-top: 10px">
        DATA:data from srpingboot⇒HelloWorldSpringBoot(mysql)
      </h6>
      <el-divider></el-divider>
      <el-form-item :label="t('user.Name')" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item :label="t('user.Password')" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm()"
          >{{ t("user.Login") }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
/*****************************************************************************/
/*****************************************************************************/
// Composition API
/*****************************************************************************/
/*****************************************************************************/
import {
  ref,
  reactive,
  // computed,
  // watchEffect,
  // watch,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  getCurrentInstance,
} from "vue";
// import { mapActions, mapMutations } from "vuex";
// 导入相关api
// import { computed } from "vue";

// Vuex
import { useStore } from "vuex";
// //要在js中使用国际化
import { useI18n } from "vue-i18n";
//引入路由函数
import { useRouter } from "vue-router";

export default {
  // Composition API
  setup() {
    // 定义数据
    // const obj = {};
    // const data = [];

    // Vuex
    const store = useStore();

    // // Vuex Action 辅助函数mapActions 组件内方便调用
    // const {
    //   setloginuser: [setloginuser],
    // } = store._actions;

    const setloginuser = (operation) => {
      store.dispatch("setloginuser", operation);
    };

    //初始化路由
    const router = useRouter();

    // 使用国际化定义rules
    const { t } = useI18n();

    // 定义响应式数据
    // let refCounter = ref(0);
    // let reactiveObj = reactive({ name: "hello", age: 20 });
    // let reactiveInfo = reactive({ firstName: "Foo", lastName: "Bar" });

    // 定义响应式数据
    // 用户数据
    let form = reactive({
      username: "",
      password: "",
    });

    // 提交按钮
    const app = getCurrentInstance();
    let globalProperties = app.appContext.config.globalProperties;
    //设置一个 <a-form
    // ref="ruleForm"
    //  :model="form"
    // :rules="rules"
    //> ref同名属性,并使用ref(null)包装
    const ruleFormRef = ref(null); //通过ref或reactive包裹起来让其成为响应式数据
    //2.一旦后面return {ruleForm},vue3会自动绑定ref="ruleForm"的组件
    //设定方法,但是要通过ruleForm.value才能拿到组件
    // 提交
    const submitForm = () => {
      ruleFormRef.value.validate((valid) => {
        //ruleFormRef通过ref包裹的数据需要使用ruleFormRef.value来取得相应的值
        // ,而reactive包裹的数据不需要通过.value来取得相应的值
        if (valid) {
          // 用户认证
          let url;

          // url = Vue.prototype.base_url + "/uservue/login";
          // url = appContext.config.globalProperties.base_url + "/uservue/login";
          url = globalProperties.base_url + "/uservue/login";

          let data = globalProperties.$qs.stringify({
            // 使用 sq 插件对 axios 中 json 数据进行转换
            name: form.username,
            password: form.password,
            email: "",
            phonenumber: "",
            userimg: "",
          });

          globalProperties.$axios
            .post(url, data)
            .then((res) => {
              console.log(res.data);
              if (res.data.result == "success") {
                // localStorage.setItem("token", res.headers.token);//存token    ⇒ 转到拦截器 main.js

                // vuex stroe 用户数据保存
                let loginuser = {
                  name: form.username,
                  password: form.password,
                };
                // vuex Action 登录信息存入store
                setloginuser(loginuser);
                // 通过的逻辑 路由跳转
                router.push({
                  path: "/mainenu",
                  query: { id: form.username },
                });
              } else {
                // localStorage.removeItem("token");//删除token   ⇒ 转到拦截器 main.js
                globalProperties.$message({
                  showClose: true,
                  message: t("user.LoginError"),
                  type: "error",
                });
              }
            })
            // .catch((error) => {
            .catch(() => {
              // localStorage.removeItem("token");//删除token   ⇒ 转到拦截器 main.js
              globalProperties.$message({
                showClose: true,
                message: t("user.Error"),
                type: "error",
              });
            });
        } else {
          console.log("验证失败");
          return false;
        }
      });
    };

    // 使用国际化定义rules
    const rules = reactive({
      username: [
        {
          required: true,
          message: t("user.UserNotEmpty"),
          trigger: "blur",
        },
        {
          min: 1,
          max: 20,
          message: t("user.Min1max20"),
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: t("user.PasswordNotEmpty"),
          trigger: "blur",
        },
        {
          min: 1,
          max: 50,
          message: t("user.Min1max50"),
          trigger: "blur",
        },
      ],
    });
    // 定义计算属性 getter 写法
    // const fullName = computed(
    //   () => reactiveInfo.firstName + " " + reactiveInfo.lastName
    // );

    // 计算属性getter setter 写法
    // const fullName = computed({
    //   get: () => reactiveInfo.firstName + " " + reactiveInfo.lastName,
    //   set: (newVal) => {
    //     let name = newVal.split(" ");
    //     reactiveInfo.firstName = name[0];
    //     reactiveInfo.lastName = name[1];
    //   },
    // });

    // 定义侦听器 VUE3中watch和watchEffect的用法 https://blog.csdn.net/qq_17355709/article/details/112723178
    // watchEffect(() => {
    //   console.log("watchEffect自动侦听器");
    // });
    // watch(
    //   () => {
    //     console.log("watch手动侦听器");
    //   },
    //   { deep: true, immediate: true } // 开启深度侦听和立即执行侦听器
    // );

    // // 定义方法
    // const increment = () => {
    //   refCounter.value++; // ref 包裹的数据是 ref对象，取数据时需要使用 ref对象.value
    //   reactiveObj.age++;
    // };
    // 定义生命周期函数 移除了 beforeCreate、created 这两个生命周期的内容可以直接在 setup函数中定义
    onBeforeMount(() => {
      console.log("onBeforeMount");
    });
    onMounted(() => {
      console.log("onMounted");
      localStorage.removeItem("token");
    });
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("onUnmounted");
    });

    // 返回数据方法等让 template 模板使用
    return {
      form,
      setloginuser,
      rules,
      submitForm,
      t,
      ruleFormRef, //Q:为什么上面要用.value的形式,A:这里会自动解绑
      // reactiveInfo,
      // fullName,
      // increment,
    };
  },
};

/*****************************************************************************/
/*****************************************************************************/
// 传统的Options API
/*****************************************************************************/
/*****************************************************************************/
/*
import { mapActions, mapMutations } from "vuex";
export default { 
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: this.$t("user.UserNotEmpty"),
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: this.$t("user.Min1max20"),
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: this.$t("user.PasswordNotEmpty"),
            trigger: "blur",
          },
          {
            min: 1,
            max: 50,
            message: this.$t("user.Min1max50"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    localStorage.removeItem("token");
  },
  methods: {
    // vuex Action2 辅助函数mapActions 组件内方便调用
    ...mapActions(["setloginuser"]),
    // vuex Action3 辅助函数mapActions 组件内方便调用
    ...mapActions({ setloginuser3: "setloginuser" }),
    // vuex Action4 辅助函数mapMutations 组件内方便调用
    ...mapMutations(
      { setloginuser4: "setloginuser" },
      { setloginuser5: "setloginuser" }
    ),
    submitForm(formName) {
      var that = this;
      this.$refs[formName].validate((valid) => {
        // console.log(valid) 验证通过为true，有一个不通过就是false
        if (valid) {
          // 用户认证
          let url;

          // url = Vue.prototype.base_url + "/uservue/login";
          // url = appContext.config.globalProperties.base_url + "/uservue/login";
          url = that.base_url + "/uservue/login";

          let data = that.$qs.stringify({
            // 使用 sq 插件对 axios 中 json 数据进行转换
            name: that.form.username,
            password: that.form.password,
            email: "",
            phonenumber: "",
            userimg: "",
          });

          that.$axios
            .post(url, data)
            .then((res) => {
              console.log(res.data);
              if (res.data.result == "success") {
                // localStorage.setItem("token", res.headers.token);//存token    ⇒ 转到拦截器 main.js

                // vuex stroe 用户数据保存
                let loginuser = {
                  name: that.form.username,
                  password: that.form.password,
                };
                // // vuex mutations
                // that.$store.commit("setloginuser", loginuser);
                // vuex Action1
                // that.$store.dispatch("setloginuser", loginuser);
                // vuex Action2
                // that.setloginuser(loginuser);
                // vuex Action3
                // that.setloginuser3(loginuser);
                // vuex Action4
                that.setloginuser4(loginuser);
                // 通过的逻辑 路由跳转
                that.$router.push({
                  path: "/mainenu",
                  query: { id: that.form.username },
                });
              } else {
                // localStorage.removeItem("token");//删除token   ⇒ 转到拦截器 main.js
                that.$message({
                  showClose: true,
                  message: that.$t("user.LoginError"),
                  type: "error",
                });
              }
            })
            // .catch((error) => {
            .catch(() => {
              // localStorage.removeItem("token");//删除token   ⇒ 转到拦截器 main.js
              that.$message({
                showClose: true,
                message: that.$t("user.Error"),
                type: "error",
              });
            });
        } else {
          console.log("验证失败");
          return false;
        }
      });
    },
  },
};
*/
</script>

<style acoped>
.login-form {
  width: 500px;
  margin: 160px auto; /* 上下间距160px，左右自动居中*/
  background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */
  padding: 30px;
  border-radius: 20px; /* 圆角 */
}

/* 背景 */
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ece9e9;
  /* background: url("../../assets/login.png"); */
}

/* 标题 */
.login-title {
  color: #303133;
  text-align: center;
}
</style>
